<template>
  <div class="specialMessage">
    <div class="time" v-if="messageType === 'time'">{{ time }}</div>
    <div class="withdraw" v-if="messageType === 'withdraw'">
      {{ withdrawerName }}撤回了一条消息
    </div>
    <div class="createGroup" v-if="messageType === 'createGroup'">{{ sponsorName }}发起了群聊</div>
    <div class="invitation" v-if="messageType === 'invitation'">
      <span class="blue" v-show="!tools.isSelf(inviter)">{{ inviterName }}</span>
      <span v-show="tools.isSelf(inviter)">{{ inviterName }}</span>邀请<span class="blue">{{ inviteesName }}</span>加入群聊
    </div>
    <div class="exitGroup" v-if="messageType === 'exitGroup'">
      {{ exitUserName }}退出群聊
    </div>
    <div class="kicking" v-if="messageType === 'kicking'">
      {{ sponsorName }}将{{ kickingUserName }}移出群聊
    </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'specialMessage.vue',
  data () {
    return {
      // 处理时间消息
      time: null,
      timer: null,
      // 撤回人姓名
      withdrawerName: '',
      // 群组发起人姓名
      sponsorName: '',
      // 邀请人姓名
      inviterName: '',
      // 被邀请人姓名
      inviteesName: '',
      // 退出群聊用户姓名
      exitUserName: '',
      // 被移出群聊用户姓名
      kickingUserName: ''
    }
  },
  props: {
    // 特殊消息类型
    messageType: {
      type: String
    },
    // 时间戳
    timestamp: {
      type: Number
    },
    // 撤回人
    withdrawer: {
      type: Number
    },
    // 是否为自己操作
    isSelf: {
      type: Boolean
    },
    // 发起人
    sponsor: {
      type: Number
    },
    // 邀请人
    inviter: {
      type: Number
    },
    // 被邀请人
    invitees: {
      type: Number
    },
    // 退出群聊用户
    exitUser: {
      type: Number
    },
    // 被移出群聊用户
    kickingUser: {
      type: Number
    }
  },
  computed: {
    userList () {
      return this.$store.state.chatInformation.userList
    }
  },
  methods: {
    timeHandler (msgYear, msgMonth, msgDate, msgHour, msgMinute) {
      // 一天的毫秒数
      const temp = 86400000
      // 当前时间
      const nowTime = moment(new Date())
      const nowYear = nowTime.format('YYYY')
      const nowMonth = nowTime.format('MM')
      const nowDate = nowTime.format('DD')
      // 判断是是否为今天的消息
      if (msgYear === nowYear && msgMonth === nowMonth && msgDate === nowDate) {
        this.time = msgHour + ':' + msgMinute
        return false
      } else if (Math.floor(this.timestamp) / temp === (Math.floor(new Date(nowTime) / temp) - 1)) {
        // 判断是否是昨天的消息
        this.time = '昨天' + msgHour + ':' + msgMinute
        return false
      } else if (msgYear === nowYear) {
        // 判断是否是今年的消息
        this.time = msgMonth + '月' + msgDate + '日' + ' ' + msgHour + ':' + msgMinute
        return false
      } else {
        this.time = msgYear + '年' + msgMonth + '月' + msgDate + '日'
        return false
      }
    },
    timeInterval (msgYear, msgMonth, msgDate, msgHour, msgMinute) {
      this.timer = setInterval(this.timeHandler(msgYear, msgMonth, msgDate, msgHour, msgMinute), 1000)
    }
  },
  created () {
    if (this.messageType === 'time') {
      // 消息时间
      const msgTime = moment(this.timestamp)
      const msgYear = msgTime.format('YYYY')
      const msgMonth = msgTime.format('MM')
      const msgDate = msgTime.format('DD')
      const msgHour = msgTime.format('HH')
      const msgMinute = msgTime.format('mm')
      this.timeHandler(msgYear, msgMonth, msgDate, msgHour, msgMinute)
      this.timeInterval(msgYear, msgMonth, msgDate, msgHour, msgMinute)
    } else if (this.messageType === 'withdraw') {
      if (this.isSelf) {
        this.withdrawerName = '你'
      } else {
        this.withdrawerName = '"' + this.userList[this.withdrawer].user_name + '"'
      }
    } else if (this.messageType === 'createGroup') {
      if (this.tools.isSelf(this.sponsor)) {
        this.sponsorName = '你'
      } else {
        this.sponsorName = this.userList[this.sponsor].user_name
      }
    } else if (this.messageType === 'invitation') {
      if (this.tools.isSelf(this.inviter)) {
        this.inviterName = '你'
      } else {
        this.inviterName = this.userList[this.inviter].user_name
      }
      this.inviteesName = this.userList[this.invitees].user_name
    } else if (this.messageType === 'exitGroup') {
      this.exitUserName = this.userList[this.exitUser].user_name
    } else if (this.messageType === 'kicking') {
      if (this.tools.isSelf(this.sponsor)) {
        this.sponsorName = '你'
      } else {
        this.sponsorName = this.userList[this.sponsor].user_name
      }
      this.kickingUserName = this.userList[this.kickingUser].user_name
    }
  },
  beforeDestroy () {
    if (this.messageType === 'time') {
      clearInterval(this.timer)
    }
  }
}
</script>

<style scoped lang="scss">
.specialMessage {
  text-align: center;
  font-size: 12px;
  .time {
    height: 65px;
    line-height: 65px;
    color: #9eaac4;
  }

  .withdraw {
    display: inline-block;
    height: 24px;
    padding: 0 12px;
    border-radius: 2px;
    background-color: rgba(48,78,236,0.04);
    color: #5F7196;
    margin-bottom: 12px;
  }

  .createGroup, .invitation, .exitGroup, .kicking {
    display: inline-block;
    height: 24px;
    padding: 0 12px;
    border-radius: 8px;
    background-color: #fff;
    color: #5F7196;
    margin-bottom: 12px;

    .blue {
      color: #304EEC;
    }
  }
}
</style>
